<template>
  <section class="app-inner">
    <div class="inner-left">
      <el-tabs v-model="tastType" stretch>
        <el-tab-pane label="计划任务" name="1"> </el-tab-pane>
        <el-tab-pane label="临时任务" name="0"> </el-tab-pane>
      </el-tabs>
      <TaskList :auto="tastType" @checked="taskItemChecked"></TaskList>
    </div>

    <div class="inner-myright" v-if="Object.keys(taskItem).length !== 0">
      <!-- <div class="inner-myright"> -->
      <task-info
        ref="taskInfo"
        :taskInfoObj="taskItem"
        :taskSpotList="taskSpotList"
        :taskCompleteState="taskCompleteState"
        :activeSpotId="activeSpotId"
        @collapseChange="collapseChange"
      >
      </task-info>
    </div>

    <div class="floor-map-content">
      <div class="inner-center">
        <div class="activeFloor">
          <el-form :inline="true" :model="formBuild" label-width="50px" class="form-inline">
            <el-form-item label="楼栋">
              <el-select v-model="formBuild.build" placeholder="请选择">
                <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-tabs v-model="activeFloorName" stretch @tab-click="tabToggle">
            <el-tab-pane v-for="item in floorList" :key="item.id" :label="item.name"> </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="floor-map">
        <canvas class="floorMap" ref="floorMapRef" :width="mapWidth" :height="mapHeight"></canvas>
        <canvas class="floorMap floorMap2" ref="floorMapRef2" :width="mapWidth" :height="mapHeight"></canvas>
        <canvas class="floorMap floorMap3" ref="floorMapRef3" :width="mapWidth" :height="mapHeight"></canvas>
      </div>
    </div>
  </section>
</template>

<script>
import zrender from 'zrender'
import TaskList from './components/TaskList'
import TaskInfo from './components/TaskInfo'
import { floorData } from '@/views/children/patrol/js/floor'
import { hasException } from '@/views/children/patrol/js/constants'
import { createBackground, normalColor, abnormalColor, clickColor } from '@/views/children/patrol/js/canvas'
import { getTaskInfo } from '@/views/children/patrol/js/patrol'
import { getListByTag } from '@/views/children/patrol/js/monitor'

export default {
  name: 'PatrolVisual',
  data () {
    return {
      zr: '',
      zr2: '',
      zr3: '',
      mapWidth: 1200,
      mapHeight: 600,
      floorData: floorData,
      activeFloorName: 0,
      taskItem: {},
      tastType: '1',
      taskSpotList: [],
      taskCompleteState: 0,
      group: null,
      activeSpotId: null,
      formBuild: {
        build: ''
      },
      buildList: [],
      floorList: [],
      isFirstActive: false, // 首次点击任务或巡更详情巡更点
      activeFloorId: '', // 点击的楼层id
      zIndex: 10
    }
  },
  components: {
    TaskList,
    TaskInfo
  },
  watch: {
    activeSpotId () {
      this.creatSpot()
    },
    'formBuild.build' (val) {
      if (val) {
        this.getListByTag(val, 2, 'floorList')
      }
    }
  },
  mounted () {
    this.getListByTag(0, 1, 'buildList')
    this.init()
    // this.drawMap()
  },
  methods: {
    async getListByTag (parentId, tag, arr) {
      const params = {
        parentId,
        tag,
        tenantNo: this.$ls.get('User-Info').tenantNo
      }
      const { data } = await getListByTag(params)
      this[arr] = data
      if (tag === 1) {
        this.formBuild.build = data[0].id
      }
      if (tag === 2) {
        if (this.isFirstActive) {
          this.isFirstActive = false
          this.activeFloorName = String(this.floorList.findIndex(e => e.id === this.activeFloorId))
          this.drawMap()
          this.creatSpot()
        } else {
          this.activeFloorName = '0'
          this.drawMap()
        }
      }
    },
    init () {
      this.group = new zrender.Group()
    },

    // 选择任务
    taskItemChecked (val) {
      this.getTaskInfo(val.taskCode)
      this.taskItem = val
    },

    // 获取任务详情
    async getTaskInfo (taskCode) {
      const { code, data, msg } = await getTaskInfo(taskCode)
      if (code === 0) {
        if (data.taskSpotEventList) {
          this.taskSpotList = data.taskSpotEventList
          this.taskCompleteState = data.taskCompleteState
          // 选择第一个点作为楼栋楼层的切换
          if (this.taskSpotList.length) {
            if (this.formBuild.build !== data.taskSpotEventList[0].spotBuilding) {
              this.isFirstActive = true
              this.formBuild.build = data.taskSpotEventList[0].spotBuilding
            } else {
              this.activeFloorName = String(this.floorList.findIndex(e => e.id === this.taskSpotList[0].spotFloor))
              this.drawMap()
              this.creatSpot()
            }
            this.activeFloorId = this.taskSpotList[0].spotFloor
          }
        } else {
          this.taskSpotList = []
          this.taskCompleteState = 0
        }
        this.activeSpotId = null
        this.$nextTick(() => {
          this.$refs.taskInfo.activeNames = []
        })
      } else {
        this.$message.warning(msg)
      }
    },

    // 创建当前楼层的巡更点
    creatSpot () {
      this.group.removeAll()
      let floorId = this.floorList[this.activeFloorName].id
      let spots = this.taskSpotList.filter(e => e.spotFloor === floorId)
      spots.forEach(e => {
        if (e.spotPositionX && e.spotPositionY) {
          // hasException: 0代表无异常，1代表异常
          this.drawCircle(this.mapWidth * e.spotPositionX, this.mapHeight * e.spotPositionY, !e.hasException, e.spotId)
        }
      })
      // }
      this.zr.add(this.group)
    },

    // 绘制圆
    drawCircle (x, y, isnormal, text) {
      let circle = new zrender.Circle({
        shape: {
          cx: x,
          cy: y,
          r: 20
        },
        data: { spotId: text },
        style: {
          fill: this.getFill(isnormal, text),
          // fill: '#1890ff',
          text,
          fontSize: '16',
          textFill: '#ffffff'
        },
        z: this.activeSpotId === text ? this.zIndex++ : 5
      })
      this.clickEle(circle)
      this.group.add(circle)
    },

    // 添加点击事件
    clickEle (zrPlEle) {
      zrPlEle.on('click', zrPlEle => {
        this.$refs.taskInfo.controlValues = true
        this.activeSpotId = zrPlEle.target.data.spotId
        // this.update(zrPlEle)
      })
    },

    // 获取圆的渐变
    getFill (isnormal, text) {
      if (this.activeSpotId === text) {
        return clickColor
      }
      return isnormal ? normalColor : abnormalColor
    },

    // 更改点击的圆的渐变
    update (zrPlEle) {
      this.creatSpot()
      zrPlEle.target.attr({
        style: {
          fill: this.clickColor
        }
      })
    },

    // 折叠面板回调
    collapseChange (spotBuilding, spotFloor, spotId) {
      // 楼栋不同: 监听更新, 相同: 手动更新
      if (this.formBuild.build !== spotBuilding) {
        this.isFirstActive = true
      } else {
        this.activeFloorName = String(this.floorList.findIndex(e => e.id === spotFloor))
        this.drawMap()
        this.creatSpot()
      }
      this.formBuild.build = spotBuilding
      this.activeFloorId = spotFloor
      this.activeSpotId = spotId
    },

    // 楼层切换
    tabToggle () {
      this.activeSpotId = null
      this.drawMap()
      this.creatSpot()
    },

    // 地图
    drawMap () {
      this.zr = zrender.init(this.$refs.floorMapRef)
      this.zr2 = zrender.init(this.$refs.floorMapRef2)
      this.zr3 = zrender.init(this.$refs.floorMapRef3)
      this.zr.clear()
      this.zr2.clear()
      this.zr3.clear()
      this.floorList.forEach((item, index, arr) => {
        if (+this.activeFloorName === index) {
          this.zr.add(createBackground(item.mapUrl, this.mapWidth, this.mapHeight))
          if (index > 0) {
            this.zr2.add(createBackground(arr[index - 1].mapUrl, this.mapWidth, this.mapHeight))
          }
          if (index > 1) {
            this.zr3.add(createBackground(arr[index - 2].mapUrl, this.mapWidth, this.mapHeight))
          }
        }
      })
    },

    // 获取label
    getLabel (val) {
      return this.$base.constFormatter(hasException, val)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  height: 100%;
  position: relative;
  .inner-left {
    width: 3.3rem;
    float: left;
    position: absolute;
    z-index: 999;
  }
  /deep/ .el-tabs__item {
    color: #999999;
  }
  /deep/ .el-tabs__item.is-active {
    font-size: 0.18rem !important;
    color: #1989fa;
  }
  .inner-myright {
    width: 3rem;
    height: 9rem;
    float: right;
    right: 0;
    position: absolute;
    z-index: 999;
  }
  .floor-map-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .inner-center {
      display: flex;
      justify-content: center;
      .activeFloor {
        width: 9rem;
        display: flex;
        justify-content: space-between;
        .form-inline {
          width: 4rem;
          .el-form-item {
            display: flex;
            .el-form-item__content {
              flex: 1;
            }
          }
        }
        .el-tabs {
          width: 4rem;
        }
      }
    }
    .floor-map {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      .floorMap {
        display: block;
        // top: 1rem;
        position: absolute;
        z-index: 50;
        transform: perspective(50px) rotateX(1deg);
      }
      .floorMap2 {
        top: 0.7rem;
        z-index: 20;
        opacity: 0.5;
      }
      .floorMap3 {
        top: 1.2rem;
        z-index: 0;
        opacity: 0.1;
      }
    }
  }
}
</style>
